import { useEffect, useState } from 'react';
import { Row, Col, Card, message } from 'antd';
import ReactEcharts from 'echarts-for-react';
import { dataOverview } from '../../../../apis/auth';
import './index.less';

const DashOverview = () => {
    const [data, setData] = useState(null);

    const fetchData = async () => {
        try {
            const response = await dataOverview.getOverview();
            if (response.data.code === 200) {
                setData(response.data.data);
            } else {
                message.error(response.data.message);
            }
        } catch (error) {
            message.error('获取数据失败，请稍后再试');
        }
    };

    useEffect(() => {
        fetchData();
    }, []);
  //两个饼图函数的封装
    const getStatusOption = () => ({
        title: {
            text: '订单状态比率',
            left: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
            orient: 'vertical',
            left: 'left'
        },
        series: [
            {
                name: '订单状态',
                type: 'pie',
                radius: '50%',
                data: [
                    { value: (data?.sendPercent || 0) * 100, name: '待发货' },
                    { value: (data?.deliveryPercent || 0) * 100, name: '配送中' },
                    { value: (data?.refundPercent || 0) * 100, name: '待退款' },
                    { value: (data?.haveRefundPercent || 0) * 100, name: '已退款' },
                    { value: (data?.haveDealPercent || 0) * 100, name: '已成交' },
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
                label: {
                    formatter: '{b}: {d}%'
                }
            }
        ]
    });

    const getSuccessOption = () => ({
        title: {
            text: '订单成败比率',
            left: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
            orient: 'vertical',
            left: 'left'
        },
        series: [
            {
                name: '订单成败',
                type: 'pie',
                radius: '50%',
                data: [
                    { value: data?.totalDeal || 0, name: '总成交数' },
                    { value: data?.totalFalse || 0, name: '总失败数' }
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
                label: {
                    formatter: '{b}: {d}%'
                }
            }
        ]
    });

    return (
        <div className="dashboard-overview">
            <Row gutter={[16, 16]} style={{ marginBottom: '24px' }}>
                <Col span={4}>
                    <Card title="今日新增：" bordered={false} className="data-card">
                        <div>总销售额:</div>
                        <h3>{data?.today || 0}</h3>
                    </Card>
                </Col>
                <Col span={4}>
                    <Card title="待发货" bordered={false} className="data-card">
                        <div>累计数量：</div>
                        <h3>{data?.send || 0}</h3>
                    </Card>
                </Col>
                <Col span={4}>
                    <Card title="配送中" bordered={false} className="data-card">
                        <div>累计数量：</div>
                        <h3>{data?.delivery || 0}</h3>
                    </Card>
                </Col>
                <Col span={4}>
                    <Card title="待退款" bordered={false} className="data-card">
                        <div>累计数量：</div>
                        <h3>{data?.refund || 0}</h3>
                    </Card>
                </Col>
                <Col span={4}>
                    <Card title="已退款" bordered={false} className="data-card">
                        <div>累计数量：</div>
                        <h3>{data?.haveRefund || 0}</h3>
                    </Card>
                </Col>
                <Col span={4}>
                    <Card title="已成交" bordered={false} className="data-card">
                        <div>累计数量：</div>
                        <h3>{data?.haveDeal || 0}</h3>
                    </Card>
                </Col>
            </Row>
            <Row gutter={16}>
                <Col span={12}>
                    <Card  className="chart-card">
                        <ReactEcharts option={getStatusOption()} />
                    </Card>
                </Col>
                <Col span={12}>
                    <Card  className="chart-card">
                        <ReactEcharts option={getSuccessOption()} />
                    </Card>
                </Col>
            </Row>
        </div>
    );
};

export default DashOverview;
